<template>
    <view class="bottom">
        <Header></Header>
        <view class="top">
            <!--            <u-row gutter="16" justify="center" align="center">-->
            <!--                <u-col span="4" text-align="center">-->
            <!--                    <u-avatar :src="user.avatar"></u-avatar>-->
            <!--                </u-col>-->
            <!--                <u-col span="4" text-align="left">-->
            <!--                    <view class="top-text">-->
            <!--                        <view class="top-text-item" style="font-size: 28rpx">{{ user.nickname }}</view>-->
            <!--                        <view class="top-text-item">-->
            <!--                            <i class="custom-icon custom-icon-objects-color_diamond"-->
            <!--                               style="color: #65a5c7;padding-right: 5rpx"></i>-->
            <!--                            <span>{{ user.coin }}</span>-->
            <!--                        </view>-->
            <!--                        <view class="top-text-item">-->
            <!--                            <u-icon name="rmb-circle-fill" color="#2979ff" size="28"-->
            <!--                                    style="padding-right: 5rpx"></u-icon>-->
            <!--                            <span>{{ user.shop_score }}</span>-->
            <!--                        </view>-->
            <!--                    </view>-->
            <!--                </u-col>-->
            <!--                <u-col span="4" text-align="center">-->
            <!--                    <view style="font-size: 30rpx" @click="changeInfo">edit</view>-->
            <!--                </u-col>-->
            <!--            </u-row>-->
            <u-row gutter="16" justify="center">
                <u-col span="3" text-align="left">
                    <u-avatar :src="user.avatar"></u-avatar>
                </u-col>
                <u-col span="3" text-align="left">
                    <view style="font-size: 28rpx">{{ user.nickname }}</view>
                </u-col>
                <u-col span="5" text-align="left">
<!--                    <u-icon name="edit-pen-fill" size="36" @click="changeInfo"></u-icon>-->
                </u-col>
            </u-row>
        </view>
        <view class="property">
            <view class="property-item">
                <view class="property-item-text">
                    Diamond
                </view>
                <view class="property-item-value">
                    <!--                    <i class="custom-icon custom-icon-objects-color_diamond" style="color: #65a5c7;"></i>-->
                    <span>{{ user.coin }}</span>
                </view>
            </view>
            <view class="property-item">
                <view class="property-item-text">
                    Integral
                </view>
                <view class="property-item-value">
                    <!--                    <u-icon name="rmb-circle-fill" color="#2979ff" size="30"></u-icon>-->
                    <span>{{ user.shop_score }}</span>
                </view>
            </view>
            <view class="property-item">
                <u-button shape="circle" size="mini">exchange</u-button>
            </view>
        </view>
        <view class="btn">
            <view class="recharge">
                <u-button shape="circle" size="medium" @click="recharge">Recharge</u-button>
            </view>
            <view class="red">
                <u-button shape="circle" size="medium" @click="toRedPacket">Red packet</u-button>
            </view>
        </view>
        <view class="button">
            <view class="item" @click="steam">
                <view>
                    <u-image src="@/static/icon/steam.png" width="50rpx" height="50rpx"></u-image>
                </view>
                <view style="padding: 10rpx">
                    Steam link
                </view>
                <view>
                    <u-icon name="arrow-right" size="30"></u-icon>
                </view>
            </view>
            <view class="item" @click="changeInfo">
                <view>
                    <u-image src="@/static/icon/account.png" width="50rpx" height="50rpx"></u-image>
                </view>
                <view style="padding: 10rpx">
                    Account security
                </view>
                <view>
                    <u-icon name="arrow-right" size="30"></u-icon>
                </view>
            </view>
        </view>
        <!-- 设置 -->
        <view style="padding-top: 30rpx">
            <u-cell-group>
                <!--                <u-cell-item icon="attach" title="Steam transaction link" @click="steam" class="cell-group-item"-->
                <!--                             value="modify" :arrow="false"></u-cell-item>-->
                <u-cell-item icon="list-dot" title="My backpack" @click="backpack"
                             class="cell-group-item"></u-cell-item>
                <u-cell-item icon="coupon" title="Pickup Record" @click="pickupRecord"
                             class="cell-group-item"></u-cell-item>
                <u-cell-item icon="order" title="Personal details" @click="toDetails"
                             class="cell-group-item"></u-cell-item>
                <u-cell-item icon="plus" title="Bind invitation code" @click="inviteCode"
                             class="cell-group-item"></u-cell-item>
                <u-cell-item icon="file-text" title="Feedback" @click="feedback" class="cell-group-item"></u-cell-item>
                <u-cell-item icon="server-fill" title="Help" @click="help" class="cell-group-item"></u-cell-item>

            </u-cell-group>
        </view>
        <view class="exit">
            <u-button @click="logout" shape="circle" size="medium">Exit</u-button>
        </view>
        <!--  口令红包-->
        <u-popup border-radius="25" mode="center" v-model="commandShow" closeable :width="windowsWidth+'px'">
            <view
                style="display: flex;flex-direction: column;align-items: center;background-color: #0f0e2d">
                <h2 style="padding: 40rpx">Password red envelope</h2>
                <u-input placeholder="please input password" class="input" v-model="commandForm.code"
                         type="text" border/>
                <view style="display: flex;margin-top: 20rpx;margin-bottom: 15rpx">
                    <u-button type="info" @click="commandShow = false" shape="circle" size="medium">Cancel</u-button>
                    <u-button style="margin-left: 50rpx" type="success" @click="commandConfirm" shape="circle"
                              size="medium">Confirm
                    </u-button>
                </view>
            </view>
        </u-popup>
        <!--修改steam交易链接-->
        <u-popup border-radius="25" mode="center" v-model="SteamUrlShow" closeable :width="windowsWidth+'px'">
            <view class="popupView">
                <h2 class="popupView-text">Modify Steam transaction link</h2>
                <u-input placeholder="Please enter the Steam transaction link" v-model="SteamUrl.steamUrl" type="text"
                         border
                         class="popupView-input" focus/>
                <view class="popupView-button">
                    <u-button type="info" shape="circle" @click="SteamUrlShow = false" size="medium"
                              class="popupView-button-item">
                        Cancel
                    </u-button>
                    <u-button shape="circle" style="margin-left: 150rpx" type="success" size="medium"
                              class="popupView-button-item" @click="SteamUrlConfirm">
                        Confirm
                    </u-button>
                </view>
            </view>
        </u-popup>

        <!--        修改密码弹窗-->
        <!--        <u-popup border-radius="25" class="updatePassword" mode="center" v-model="updatePasswordShow" closeable-->
        <!--                 :width="windowsWidth+'px'">-->
        <!--            <view class="popupView">-->
        <!--                <h2 class="popupView-text">修改密码</h2>-->
        <!--                <u-input placeholder="请输入旧密码" class="popupView-input" v-model="updatePassword.oldPassword"-->
        <!--                         type="password" border password-icon focus/>-->
        <!--                <u-input placeholder="请输入新的密码" class="popupView-input" v-model="updatePassword.newPassword"-->
        <!--                         type="password" border password-icon/>-->
        <!--                &lt;!&ndash;                <text style="font-size: 10px;position: absolute;margin-top: 290rpx">密码长度在6-18之间</text>&ndash;&gt;-->
        <!--                <u-input placeholder="请输入确认密码" class="popupView-input" v-model="updatePassword.newPassword1"-->
        <!--                         type="password" border password-icon/>-->
        <!--                <view class="popupView-button">-->
        <!--                    <u-button class="popupView-button-item" type="info" @click="updatePasswordShow = false"-->
        <!--                              size="medium">-->
        <!--                        取 消-->
        <!--                    </u-button>-->
        <!--                    <u-button class="popupView-button-item" type="success" @click="updatePwd" size="medium">-->
        <!--                        确 定-->
        <!--                    </u-button>-->
        <!--                </view>-->
        <!--            </view>-->
        <!--        </u-popup>-->
        <!--        绑定邀请码弹窗-->
        <u-popup border-radius="25" class="bindRelationShow" mode="center" v-model="bindRelationShow" closeable
                 :width="windowsWidth+'px'">
            <view class="popupView">
                <h2 class="popupView-text">Bind invitation code</h2>
                <u-input placeholder="Please enter the invitation code" class="popupView-input"
                         v-model="bindRelation.sharecode"
                         type="text" border focus/>
                <view class="popupView-button">
                    <u-button class="popupView-button-item" type="info" @click="bindRelationShow = false" size="medium">
                        Cancel
                    </u-button>
                    <u-button class="popupView-button-item" type="success" @click="bindRelationConfirm" size="medium">
                        Confirm
                    </u-button>
                </view>
            </view>
        </u-popup>
        <!--        实名认证弹窗-->
        <!--        <u-popup border-radius="25" class="updatePassword" mode="center" v-model="checkRealNameShow" closeable-->
        <!--                 :width="windowsWidth+'px'">-->
        <!--            <view class="popupView">-->
        <!--                <h2 class="popupView-text">实名认证</h2>-->
        <!--                <u-input placeholder="请输入真实姓名" class="popupView-input" v-model="checkRealName.realname"-->
        <!--                         type="text"-->
        <!--                         border focus/>-->
        <!--                <u-input placeholder="请输入身份证号" class="popupView-input" v-model="checkRealName.idcard" type="text"-->
        <!--                         border/>-->

        <!--                <view class="popupView-button">-->
        <!--                    <u-button class="popupView-button-item" type="info" @click="checkRealNameShow = false"-->
        <!--                              size="medium">取 消-->
        <!--                    </u-button>-->
        <!--                    <u-button class="popupView-button-item" type="success" @click="checkRealNameConfirm" size="medium">-->
        <!--                        Confirm-->
        <!--                    </u-button>-->
        <!--                </view>-->
        <!--            </view>-->
        <!--        </u-popup>-->
        <!--   注销账号     -->
        <!--        <u-popup border-radius="25" class="destroyUser" mode="center" v-model="destroyUserShow" closeable-->
        <!--                 :width="windowsWidth+'px'">-->
        <!--            <view class="popupView">-->
        <!--                <h2 class="popupView-text">注销账号</h2>-->
        <!--                <text style="font-size: 26rpx;margin-top: 25rpx">-->
        <!--                    注销账号后，所有数据将无法恢复，请谨慎操作-->
        <!--                </text>-->
        <!--                <view class="popupView-button">-->
        <!--                    <u-button class="popupView-button-item" type="info" @click="destroyUserShow = false" size="medium">-->
        <!--                        取 消-->
        <!--                    </u-button>-->
        <!--                    <u-button class="popupView-button-item" type="success" @click="destroyUserConfirm" size="medium">-->
        <!--                        Confirm-->
        <!--                    </u-button>-->
        <!--                </view>-->
        <!--            </view>-->
        <!--        </u-popup>-->
        <u-toast ref="uToast"/>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>

import Header from "@/components/header/header.vue";
import CustomTabbar from "@/components/tabbar/tabbar.vue";

export default {
    name: "my",
    components: {
        CustomTabbar,
        Header
    },
    data() {
        return {
            windowsWidth: 0,
            account: '',//账户余额
            commandShow: false,
            commandForm: {},
            SteamUrlShow: false, // 修改steam链接弹窗
            // updatePasswordShow: false,//修改密码弹窗
            bindRelationShow: false,// 绑定邀请码弹窗
            // commandShow: false,//口令红包弹窗
            checkRealNameShow: false,//实名认证弹窗
            destroyUserShow: false,// 注销账号弹窗
            SteamUrl: { //修改steam链接表单
                steamUrl: ''
            },
            // updatePassword: { //修改密码表单
            //     oldPassword: '',
            //     newPassword: '',
            //     newPassword1: ''
            // },
            // commandForm: { //口令红包表单
            //     code: ''
            // },
            bindRelation: { //绑定邀请码表单
                sharecode: ''
            },
            checkRealName: { //修改密码表单
                realname: '',
                idcard: '',
            },
        }
    },
    computed: {
        user() {
            return this.$store.getters.getUser ? this.$store.getters.getUser : {};
        }
    },
    mounted() {
        this.windowsWidth = this.$store.getters.getWindowsWidth;
        document.documentElement.style.setProperty('--windows-width', this.windowsWidth + 'px');
    },
    methods: {
        // 跳转红包
        toRedPacket() {
            // 判断是否登录
            // const token = this.$store.getters.getToken ? this.$store.getters.getToken : null;
            // if (!token) {
            //     EventBus.$emit('call-loginOpen');
            //     return;
            // }
            this.commandForm = {}
            this.commandShow = true
        },
        // 修改steam链接
        SteamUrlConfirm() {
            if (!this.SteamUrl.steamUrl) {
                this.$refs.uToast.show({
                    title: 'Please enter the Steam transaction link！',
                    type: 'error'
                })
                return;
            }
            this.$u.api.modifySteamUrl({
                url: this.SteamUrl.steamUrl
            }).then(res => {
                if (res.code === 1) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'success'
                    })
                    this.$u.api.getUserInfo().then(response => {
                        if (response.code === 1) {
                            const user = response.data;
                            // 提交mutation来更新Vuex中的状态
                            this.$store.commit('user/SET_USER', user);
                            // 保存到本地存储
                            uni.setStorageSync('user', user);
                        }
                    })
                    this.SteamUrlShow = false;
                    this.SteamUrl.steamUrl = '';
                } else {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error'
                    })
                }
            })
        },
        //修改密码
        // updatePwd() {
        //     const passwordRegex = /^[0-9A-Za-z]{8,12}$/;
        //     if (!this.updatePassword.oldPassword) {
        //         this.$u.toast('请输入旧密码');
        //         return;
        //     }
        //     if (!this.updatePassword.newPassword) {
        //         this.$u.toast('请输入新密码');
        //         return;
        //     }
        //     if (!this.updatePassword.oldPassword) {
        //         this.$u.toast('请输入确认密码');
        //         return;
        //     }
        //     if (!passwordRegex.test(this.updatePassword.newPassword)) {
        //         this.$u.toast('密码长度在8-12之间且只能包含字母数字');
        //         return;
        //     }
        //     if (this.updatePassword.newPassword !== this.updatePassword.newPassword1) {
        //         this.$u.toast('新密码与确认密码不一致');
        //         return;
        //     }
        //     this.$u.api.updatePassword({
        //         oldpassword: this.updatePassword.oldPassword,
        //         newpassword: this.updatePassword.newPassword
        //     }).then(res => {
        //         if (res.code === 1) {
        //             this.$refs.uToast.show({
        //                 title: res.msg,
        //                 type: 'success'
        //             })
        //             this.$u.api.getUserInfo().then(res => {
        //                 if (res.code === 1) {
        //                     const user = res.data;
        //                     // 提交mutation来更新Vuex中的状态
        //                     this.$store.commit('user/SET_USER', user);
        //                     // 保存到本地存储
        //                     uni.setStorageSync('user', user);
        //                 }
        //             })
        //             this.updatePasswordShow = false
        //             this.updatePassword = {}
        //         } else {
        //             this.$refs.uToast.show({
        //                 title: res.msg,
        //                 type: 'error'
        //             })
        //         }
        //     })
        // },
        // 口令红包领取
        // commandConfirm() {
        //     if (!this.commandForm.code) {
        //         this.$u.toast('请输入口令');
        //         return;
        //     }
        //     this.$u.api.getRedPacket({
        //         code: this.commandForm.code
        //     }).then(res => {
        //         if (res.code === 1) {
        //             this.$refs.uToast.show({
        //                 title: res.msg,
        //                 type: 'success'
        //             })
        //             this.$u.api.getUserInfo().then(res => {
        //                 if (res.code === 1) {
        //                     const user = res.data;
        //                     // 提交mutation来更新Vuex中的状态
        //                     this.$store.commit('user/SET_USER', user);
        //                     // 保存到本地存储
        //                     uni.setStorageSync('user', user);
        //                 }
        //             })
        //             this.commandForm = {}
        //             this.commandShow = false
        //         } else {
        //             this.$refs.uToast.show({
        //                 title: res.msg,
        //                 type: 'error'
        //             })
        //         }
        //     })
        // },
        // 绑定邀请码
        bindRelationConfirm() {
            if (!this.bindRelation.sharecode) {
                this.$u.toast('Please enter the invitation code');
                return;
            }
            this.$u.api.bindRelation({
                sharecode: this.bindRelation.sharecode
            }).then(res => {
                if (res.code === 1) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'success'
                    })
                    this.$u.api.getUserInfo().then(response => {
                        if (response.code === 1) {
                            const user = response.data;
                            // 提交mutation来更新Vuex中的状态
                            this.$store.commit('user/SET_USER', user);
                            // 保存到本地存储
                            uni.setStorageSync('user', user);
                        }
                    })
                    this.bindRelationShow = false
                    this.bindRelation = {}
                } else {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error'
                    })
                }
            })
        },
        // 实名认证
        checkRealNameConfirm() {
            if (!this.checkRealName.realname) {
                this.$u.toast('请输入真实姓名');
                return;
            }
            if (!this.checkRealName.idcard) {
                this.$u.toast('请输入身份证号');
                return;
            }
            if (!this.$u.test.idCard(this.checkRealName.idcard)) {
                this.$u.toast('请输入正确的身份证号');
                return;
            }
            this.$u.api.checkRealName({
                realname: this.checkRealName.realname,
                idcard: this.checkRealName.idcard
            }).then(res => {
                if (res.code === 1) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'success'
                    })
                    this.$u.api.getUserInfo().then(response => {
                        if (response.code === 1) {
                            const user = response.data;
                            // 提交mutation来更新Vuex中的状态
                            this.$store.commit('user/SET_USER', user);
                            // 保存到本地存储
                            uni.setStorageSync('user', user);
                        }
                    })
                    this.checkRealNameShow = false
                    this.checkRealName = {}
                } else {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error'
                    })
                }
            })
        },
        // 注销账号
        destroyUserConfirm() {
            this.$u.api.destroyUser().then(res => {
                if (res.code === 1) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'success',
                        url: '/pages/index/index'
                    })
                    this.destroyUserShow = false
                    // 提交Vuex的CLEAR_USER_DATA突变来清除用户信息和token
                    this.$store.commit('user/CLEAR_USER_DATA');
                    // 清除本地存储中的数据
                    uni.removeStorageSync('user');
                    uni.removeStorageSync('token');

                    // 跳转到登录页面
                } else {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error'
                    })
                }
            })
        },
        // 充值
        recharge() {
            uni.navigateTo({
                url: '/pages/recharge/recharge'
            });
        },
        // 修改个人信息
        changeInfo() {

            uni.navigateTo({
                url: '/pages/my/myInfo/myInfo'
            });
        },
        // steam交易链接
        steam() {
            this.SteamUrl = {}
            this.SteamUrlShow = true
        },
        // 修改密码
        // changePassword() {
        //     this.updatePassword = {}
        //     this.updatePasswordShow = true
        // },
        // 我的背包
        backpack() {
            this.$u.route('/pages/my/myBox/myBox');
        },
        // 提货记录
        pickupRecord() {
            this.$u.route('/pages/my/pickupRecord/pickupRecord');
        },
        // 个人明细
        toDetails(){
            this.$u.route('/pages/my/detail/detail');
        },
        // 口令红包
        // command() {
        //     this.commandForm = {}
        //     this.commandShow = true
        // },
        // 绑定邀请码
        inviteCode() {
            this.bindRelation = {}
            this.bindRelationShow = true
        },
        // 实名认证
        realName() {
            this.checkRealName = {}
            this.checkRealNameShow = true
        },
        // 意见反馈
        feedback() {
            this.$u.route('/pages/my/feedBack/feedBack');
        },
        // 联系我们
        help() {
            this.$u.route('/pages/my/help/help');
        },
        // 注销账户
        destroyUser() {
            this.destroyUserShow = true
        },
        // 退出登录
        logout() {
            // 提交Vuex的CLEAR_USER_DATA突变来清除用户信息和token
            this.$store.commit('user/CLEAR_USER_DATA');
            // 清除本地存储中的数据
            uni.removeStorageSync('user');
            uni.removeStorageSync('token');

            // 跳转到登录页面
            uni.reLaunch({
                url: '/pages/index/index'
            });
        }
    }
}

</script>
<style scoped lang="scss">
.top {
    margin-top: 50rpx;
    margin-left: 20rpx;
    //backdrop-filter: blur(10px) brightness(90%);
    //background-color: #0099FF;
    //background-image: linear-gradient(-44deg, #FF6FD8 10%, #3813C2 100%);
    //background-color: #263056;
    //border-radius: 30rpx;
    padding: 20rpx;

    .top-text {
        padding: 20rpx;

        .top-text-item {
            padding: 5rpx;
        }
    }
}

.property {
    padding: 20rpx;
    background-image: linear-gradient(#27315e 0%, #324278 100%);
    border-radius: 30rpx;
    display: flex;
    flex-direction: row;
    font-size: 26rpx;

    .property-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 33%;

        .property-item-text {
            height: 50rpx;
            color: #66cbf0;
        }

        ::v-deep .u-btn--default {
            color: #ffffff;
            background-color: #4b639e;
        }
    }
}

.btn {
    margin-top: 40rpx;
    display: flex;

    .recharge {
        width: 50%;
        display: flex;
        justify-content: center;

        ::v-deep .u-btn--default {
            color: #0f0e2d;
            background-color: #62d4b2;
            font-size: 26rpx;
        }

        ::v-deep .u-size-medium {
            width: 70%;
        }
    }

    .red {
        width: 50%;
        display: flex;
        justify-content: center;

        ::v-deep .u-btn--default {
            color: #ffffff;
            background-color: #d24d69;
            font-size: 26rpx;
        }

        ::v-deep .u-size-medium {
            width: 70%;
        }
    }
}

.button {
    //padding: 20rpx;
    display: flex;

    .item {
        margin: 20rpx;
        display: flex;
        width: 50%;
        height: 100rpx;
        align-items: center;
        justify-content: center;
        border-radius: 20rpx;
        background-color: #2f3a68;
    }

}

.input {
    width: 80%;
    margin-bottom: 30rpx;

    ::v-deep .uni-input-input {
        color: #ffffff;
    }
}

::v-deep .u-cell-item-box {
    background-color: #0f0e2d;
}

::v-deep .u-cell-hover {
    background-color: transparent !important;
    color: #00eaff !important;
}

.cell-group-item {
    color: #ffffff;

}

.exit {
    display: flex;
    justify-content: center;
    margin-top: 30rpx;


    ::v-deep .u-btn--default {
        color: #ffffff;
        background-color: #2f3a68;
    }

    ::v-deep .u-size-medium {
        font-size: 36rpx;
        width: 50%;
    }

    ::v-deep .u-hairline-border :after {
        border: 0;
    }
}

.popupView {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #0f0e2d;

    .popupView-text {
        //padding-top: 30rpx;
        margin: 30rpx;
    }

    .popupView-input {
        width: 80%;
        margin-top: 25rpx;
        border-radius: 15rpx;

        ::v-deep .u-input__input {
            color: #ffffff
        }
    }

    .popupView-button {
        margin-top: 20rpx;
        margin-bottom: 10rpx;

        .popupView-button-item {
            margin: 20rpx;
        }
    }
}

::v-deep .u-type-success {
    background-color: #0f0e2d;
    border: none;
}

::v-deep .u-type-error {
    background-color: #0f0e2d;
    border: none;
}
</style>